<template>
  <div>
    <h1>子组件</h1>
    <p>我是子组件第一行</p>
    <!-- 在子组件内必须定义一个插槽, 给外面的结构预留一个位置 -->
    <slot name="head" />
    <slot name="foot" />
    <p>我是子组件第四行</p>

    <!-- 通过 node 属性 和 date 属性, 向父组件传递 html 结构 -->
    <slot :node="node" :data="data" />
    <slot name="second" :obj="obj" :user="user" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      node: { age: 18 },
      data: 21,
      obj: {
        gender: '男',
        address: '北京'
      },
      user: '刘德华'
    }
  },
  methods: {

  }
}
</script>

<style>

</style>
